<template>
	<div>
		<template v-for="(item, index) in list">
			<el-submenu :index="index + '_' + item.id" :key="item.id" v-if="item.children && item.children.length > 0">
				<template slot="title">
					<i :class="item.icon"></i>
					<span>{{item.name}}</span>
				</template>
				<navMenu :list="item.children"></navMenu>
			</el-submenu>

			<el-menu-item :index="item.href+''" :key="item.id" v-else  :class="item.name=='数据看板'||item.name=='回收站'?'levelmenu':''">
				<i :class="item.icon"></i> {{item.name}}
			</el-menu-item>
		</template>
	</div>
</template>
<script>
	export default {
		name: "navMenu",
		data(){
			return {
				
			};
		},
		props: ["list"],
	};
</script>
<style lang="css" scoped>
 .levelmenu{
	 padding:0px 15px;
	 background: #f5f7fa;
	 margin-bottom: 1px;
 }
 .levelmenu:hover{
	 background: #f5f7fa;
	 color:#303133;
 }
 .levelmenu.is-active{
	 color:#303133;
 }
 .levelmenu.is-active:hover{
	 background: #1AB8E0;
	 color:white !important;
 }

</style>
